<template>
    <div id="orderMana">
        <div class="view-top">
            <span class="router-name">订单管理</span>
        </div>
        <div class="cont">
            <div class="common-cont">
                <div class="list-tit">
                    <span style="width:5%;">序号</span>
                    <span style="width:15%;">订单时间</span>
                    <span style="width:10%;">支付状态</span>
                    <span style="width:5%;">发货状态</span>
                    <span style="width:20%;">地址</span>
                    <span style="width:10%;">手机</span>
                    <span style="width:10%;">收货人</span>
                    <span style="width:10%;">总金额</span>
                    <span style="width:5%;">原料总数</span>
                    <span style="width:10%;">操作</span>
                </div>
                <div class="list-cont">
                    <ul class="list">
                        <li v-for="(item,index) in orderList" :key="index">
                            <span style="width:5%;">{{(index+1)+nowPage*pageSize}}</span>
                            <span style="width:15%;">{{item.addTime | dateForGradePage}}</span>
                            <span style="width:10%;cursor:pointer;" @click="changePayStatus(item)" 
                                :class="item.payEnabled?'success':'false'">{{item.payEnabled?(item.channel?(item.channel=="pay.wechat.native"?"微信支付":"支付宝支付"):"已支付"):"未支付"}}</span>
                            <span style="width:5%;cursor:pointer;"
                            @click="changeSendStatus(item)" 
                            :class="item.sendEnabled?'success':'false'">{{item.sendEnabled?"已发货":"未发货"}}</span>
                            <span style="width:20%;" class="addr">{{item.address}}</span>
                            <span style="width:10%;">{{item.mobile}}</span>
                            <span style="width:10%;">{{item.name}}</span>
                            <span style="width:10%;">{{item.amount}}</span>
                            <span style="width:5%;">{{item.count}}</span>
                            <span style="width:10%;">
                                <span class="detail" @click="doShowDetail(item)">详情</span>
                                <span class="detail" style="padding-left:10px" @click="delItem(item)">删除</span>
                            </span>
                        </li>
                    </ul>
                </div>
                <el-pagination
                @current-change="handleCurrentChange"
                :page-size="pageSize"
                layout="total, prev, pager, next"
                :total="totalElements">
                </el-pagination>
            </div>
        </div>
        <el-dialog
            title="订单详情"
            :visible.sync="showDetail"
            width="30%">
            <div class="detail-list-tit">
                <span style="width:10%;">序号</span>
                <span style="width:20%;">商品名字</span>
                <span style="width:20%;">分类</span>
                <span style="width:15%;">单位</span>
                <span style="width:10%;">数量</span>
                <span style="width:10%;">金额</span>
                <span style="width:15%;">发货状态</span>
            </div>
            <div class="detail-list">
                <ul>
                    <li v-for="(item,index) in detailInfo" :key="index">
                        <span style="width:10%;">{{index+1}}</span>
                        <span style="width:20%;">{{item.productName}}</span>
                        <span style="width:20%;">{{item.typeName}}</span>
                        <span style="width:15%;">{{item.spec}}</span>
                        <span style="width:10%;">{{item.qty}}</span>
                        <span style="width:10%;">{{item.amount}}</span>
                        <span style="width:15%;cursor: pointer;" 
                        :class="item.sendEnabled?'send success':'send false'"
                        @click="changeItemStatus(item)"
                        >{{item.sendEnabled?"已发货":"未发货"}}</span>
                    </li>
                </ul>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import {BASE_URL} from "./../../../../urlConfig";
export default {
    data(){
        return{
            showDetail:false,
            attention:false,
            nowPage:0,
            userName:"",//用户登录的手机号
            pageSize:9,//分页
            orderList:[],//订单列表
            totalElements:0,//总订单条数
            detailInfo:[],//订单详情
        }
    },
    methods:{
        delItem(item){
            this.$confirm('确认此操作？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$http({
                        url:BASE_URL+"v1/stock/delete-order",
                        method:"POST",
                        data:{
                            id:item.id,
                            // enabled:item.sendEnabled?false:true,
                        }
                    }).then(res=>{
                        // this.detailInfo = res.data.items;
                        this.getOrderList(this.nowPage);
                        this.$message({
                            message: "操作成功",
                            type: "success"
                        });
                    })
                })
        },
        
        changeItemStatus(item){
            this.$confirm('确认此操作？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$http({
                        url:BASE_URL+"v1/stock/item-merge",
                        method:"GET",
                        params:{
                            id:item.id,
                            enabled:item.sendEnabled?false:true,
                        }
                    }).then(res=>{
                        this.detailInfo = res.data.items;
                        this.getOrderList(this.nowPage);
                    })
                })
        },
        doShowDetail(item){
            this.detailInfo = item.items;
            this.showDetail = true;
        },
        // 更改支付状态
        changePayStatus(item){
            if(item.payEnabled&&item.channel){
                this.$message({
                    message: "当前订单已成功支付，请自查支付记录。",
                    type: "success"
                });
                return;
            }else{
                this.$confirm('请注意是否已真实收到款项', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$http({
                        url:BASE_URL+"v1/stock/shop-merge",
                        method:"POST",
                        data:{
                            type:"PAY",
                            id:item.id,
                            payEnabled:item.payEnabled?false:true,
                            userName:this.userName
                        }
                    }).then(res=>{
                        this.getOrderList(this.nowPage);
                    })
                })
            }
        },
        // 更改发货状态
        changeSendStatus(item){
            this.$confirm('确认此操作？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$http({
                    url:BASE_URL+"v1/stock/shop-merge",
                    method:"POST",
                    data:{
                        type:"SEND",
                        id:item.id,
                        sendEnabled:item.sendEnabled?false:true,
                        userName:this.userName
                    }
                }).then(res=>{
                    this.getOrderList(this.nowPage);
                })
            })
        },
        handleCurrentChange(val){
            this.getOrderList(val - 1);
            this.nowPage = val - 1;
        },
        addInfo(){
            this.titInfo = "添加分类"
            this.showAddInfo = true;
        },
        addType(){
            this.$http({
                url:BASE_URL+"v1/stock/type-merge",
                method:"GET",
                params:{
                    id:this.typeInfo.id,
                    name:this.typeInfo.typeName
                }
            }).then(res=>{
            })
        },
        getOrderList(page){
            this.$http({
                url:BASE_URL+"v1/stock/shop-list",
                method:"GET",
                params:{
                    userName:this.userName,
                    page,
                    size:this.pageSize
                }
            }).then(res=>{
                this.orderList = res.data.content;
                this.totalElements = res.data.totalElements;
            });
        }
    },
    mounted(){
        let userData = JSON.parse(sessionStorage.getItem("userData"));
        this.userName = "13980547109";
        this.getOrderList(0);
    }
}
</script>

<style lang="scss">
@import "./orderMana.scss";
</style>
